app.component("demo-async",{
    template:`
    <div class="async">
    <suspense>
    <!-- 显示正常内容：加载需要一定时间 -->
    <!-- <template v-slot:default> -->
    <template #default>
        <async-com></async-com>
    </template>

    <!-- 显示加载过程 -->
    <!-- <template v-slot:fallback> -->
    <template #fallback>
        <h1>噔噔就来...</h1>
    </template>
</suspense>
    </div>
    `,

        data(){
            return {}
        },
        methods:{},
        computed:{}

    /* 定义普通组件/同步组件 */
    // app.component("async-com",{
    //     template:`<div>哥是异步组件</div>`
    // })
})
/*定义异步组件*/
const AsynCom = Vue.defineAsyncComponent(

    /* 入参是一个回调函数：suspense加载内容时回调 */
    ()=>{
       // 返回一个延时履约/兑现组件内容的Promise对象
       return new Promise(
        (resolve,reject)=>{

            /* 在3秒后履约组件数据 */
            setTimeout(() => {
                resolve({
                    template:`<div>哥只是个传说</div>`
                })
            }, 3000);
            
        }
       ) 
    }

)

app.component("async-com",AsynCom)